<template>
  <div :class="real_them">
    <div v-if="!show" @click="login" class="notlogin">登录</div>
    <div v-if="show" class="allreadylogin"><img :src="icon" alt="" /></div>
    <div class="hide">
      <ul>
        <a @click="infomation(1)" href="javascript:;"><li>个人中心</li></a>
        <!-- <a @click="infomation(3)" href="javascript:;"><li>我的动态</li></a>
        <a @click="infomation(4)" href="javascript:;"><li>我的收藏</li></a> -->
        <a href="javascript:;"><li>退出登录</li></a>
      </ul>
    </div>
  </div>
</template>

<script>
// import router from '../router';
import LikeDynamic from "../api/getSingleDynamic.js";
import LikeBlog from "../api/getSingleCollect.js";
export default {
  name: "Login",
  data() {
    return {
      userdynamics: [],
      collects: [],
    };
  },
  methods: {
    login() {
      this.$store.commit("changeshow", true);
    },
    infomation(x) {
      //请求用户收藏数据
      localStorage.setItem("navlist", 1);
      localStorage.setItem("nav_list1", "actived nav-list");
      localStorage.setItem("nav_list2", "nav-list");
      localStorage.setItem("nav_list3", "nav-list");
      localStorage.setItem("nav_list4", "nav-list");
      let artical = this.$store.state.infomation.artical
        ? JSON.parse(JSON.parse(this.$store.state.infomation.artical))
        : [];
      for (let index = 0; index < artical.length; index++) {
        let params = new URLSearchParams();
        params.append("id", artical[index]);
        LikeDynamic(params).then((res) => {
          if (res.status == 200) {
            this.userdynamics[index] = res.data.infomation[0];
            if (this.userdynamics[index].comment !== "") {
              this.userdynamics[index].comment = JSON.parse(
                JSON.parse(this.userdynamics[index].comment)
              );
            }
          } else if (res.status == 401) {
            this.$store.commit("addfooterTip", "加载失败了");
          }
        });
      }
      this.$store.commit("adduserdynamics", this.userdynamics);
      setTimeout(() => {
        sessionStorage.setItem(
          "userdynamics",
          JSON.stringify(this.userdynamics)
        );
      }, 1000);

      let collection = this.$store.state.infomation.collection
        ? JSON.parse(JSON.parse(this.$store.state.infomation.collection))
        : [];
      for (let x = 0; x < collection.length; x++) {
        let params = new URLSearchParams();
        params.append("id", collection[x]);
        LikeBlog(params).then((res) => {
          if (res.status == 200) {
            this.collects[x] = res.data.infomation[0];
          } else if (res.status == 401) {
            this.$store.commit("addfooterTip", "加载失败了");
          }
        });
      }
      this.$store.commit("addcollect", this.collects);
      setTimeout(() => {
        sessionStorage.setItem("collects", JSON.stringify(this.collects));
      }, 1000);
      this.$router.push({
        name: "infomation",
        params: {
          navList: x,
        },
      });
    },
  },
  computed: {
    show() {
      return this.$store.state.islogin;
    },
    real_them() {
      let k = this.$store.state.skin;
      let m = k == true ? "light" : "dark";
      return "outer" + " " + m;
    },
    icon() {
      if (this.$store.state.infomation.icon) {
        return this.$store.state.infomation.icon;
      }
      if (this.$store.state.infomation.sex == 1) {
        return "http://175.178.226.147:8080/boy.jpg";
      } else {
        return "http://175.178.226.147:8080/girl.png";
      }
    },
  },
};
</script>

<style lang="less" scoped>
@import "../main.less";
.light {
  .allreadylogin {
    transition: all 1s;
    background-color: rgba(30, 128, 255, 0.05);
  }

  .hide {
    transition: all 1s;
    ul {
      background-color: white;
      box-shadow: 0px 0px 10px 5px rgb(199, 197, 197);
      a {
        transition: all 0.5s;
        color: @fs_light_contain;
        &:hover {
          color: @fs_light_blue;
          transition: all 0.5s;
        }
      }
    }
  }
}
.dark {
  .notlogin {
    transition: all 1s;
    color: @fs_dark_contain;
    border-color: @fs_dark_smcontain;
    &:hover {
      color: @fs_light_blue;
      transition: all 1s;
      border-color: @fs_light_blue;
    }
  }

  .allreadylogin {
    color: @fs_dark_contain;
    transition: all 1s;
    background-color: @fs_dark_contain;
  }

  .hide {
    transition: all 1s;
    ul {
      background-color: @bg_dark_blue;
      box-shadow: 0px 0px 5px 5px rgba(101, 101, 101, 0.4);
      a {
        transition: all 0.5s;
        color: @fs_dark_contain;
        &:hover {
          color: @fs_light_blue;
          transition: all 0.5s;
        }
      }
    }
  }
}
.outer {
  height: 100%;
  width: 100%;
  .juzhong;
  cursor: pointer;
  position: relative;
}
.notlogin {
  height: 80%;
  width: 80%;
  border: 1px solid @bt_deep_light;
  border-radius: 4px;
  font-size: 14px;
  background-color: rgba(30, 128, 255, 0.05);
  color: @fs_btn_color;
  .juzhong;
}

.hide {
  display: none;
  position: absolute;
  z-index: 2;
  top: 30px;
  border-radius: 4px;
  ul {
    margin-top: 20px;
    width: 100px;
    list-style: none;
    a {
      display: block;
      text-decoration: none;
      width: 100%;
      height: 30px;
      li {
        .juzhong;
        width: 100%;
        height: 100%;
      }
    }
  }
  &:hover {
    display: block;
  }
}

.allreadylogin {
  height: 50px;
  width: 50px;
  border-radius: 50%;
  overflow: hidden;
  img {
    height: 100%;
  }
  &:hover + .hide {
    display: block;
  }
}
</style>